<template>
  <div class="clearfix">
    <div class="new-patterns" v-if="floor.isViewName == '1'">
      <div class="fl">
        <div class="tagI" :style="styleCss(floor)"></div>
        <div class="font-title" v-text="floor.gf_name"></div>
        <div class="font-e-title">{{floor.en_name | toUpperCase}}</div>
      </div>
      <ul class="new-pattern-nav fr">
        <li 
          v-for="(hot, index) in keyWords" 
          :key="index" 
          v-text="hot"  
          @click.stop="indexFloorJump('keyWord', hot)">
        </li>
      </ul>
      <div class="clearfix"></div>
    </div>
    <div class="clearfix"></div>
    <div class="banner img transition-ease" @click.stop="indexFloorJump(wideGoods.type, wideGoods.value)">
      <img v-if="wideGoods.img != 'loading'" v-lazy="wideGoods.img" class="adda-imgss">
    </div>
  </div>
</template>

<script>
export default {
  props: {
    floor: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      wideGoods: {
        img: 'loading'
      }
    }
  },
  computed: {
    // 判断关键字
    keyWords() {
      if (this.floor.keyWord) {
        return this.floor.keyWord.split(',')
      }
    }
  },
  mounted() {
    this.wideGoods = JSON.parse(this.floor.wide_goods)[0]
  },
  methods: {
    /**
     * 根据参数来跳转对应页面(商品详情或者搜索页面)
     */
    indexFloorJump(type, id) {
      // 当前类型
      // let type = this.wideGoods.type
      // // id
      // let id = this.wideGoods.value
      // 判断类型
      switch (type) {
        case 'goodsInfo': // 进入商品详情
          window.open('/goods/detail/' + id)
          break
        case 'channel': // 频道
          this.$emit('on-floor-channel', id)
          break
        case 'store': // 进入店铺
          this.intoStore(id)
          break
        case 'link': // 进入链接
          window.open(id.replace('/#', ''))
          break
        case 'goodsList': // 进入商品列表
          sessionStorage.setItem('goodsIds', id)
          window.open('/search/goodsLists')
          break
        case 'storeSearch':
          // this.fetchSerachGoods()
          window.open(`/search/stores?type=stores&st=2&key=${decodeURIComponent(encodeURIComponent(id))}`)
          break
        default:
          if (type == 'brandSearch') {
            window.open(`/search/goods?type=goods&st=3&name=${decodeURIComponent(encodeURIComponent(id))}&ob=`)
          } else {
            window.open(`/search/goods?type=goods&st=1&key=${decodeURIComponent(encodeURIComponent(id))}&ob=`)
          }
      }
    },
    // 进入对应商家店铺
    intoStore(id) {
      window.open('/shop/' + id)
    },
    /**
     * css样式
     */
    styleCss(indexFloor) {
      return {'border': '2px solid #' + indexFloor.gf_css}
    }
  },
  filters: {
    /**
     * 大写
     */
    toUpperCase(val) {
      if (val) {
        return val.toUpperCase()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>